import{d as t,M as d,A as a,h as r}from"./Anchors-CRD96j4l.js";import{D as c,a as n}from"./Demo-Ck8WGKWN.js";import"./index-BpvWz174.js";const s={path:"/nav/indexlist",name:"indexlist",title:"IndexList 索引列表"};function l(i){const e={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...i.components};return d(r,{children:[d("div",{class:"sys-ctx-main-left",children:[d(e.h1,{id:"sp-",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-",children:t(e.span,{className:"icon icon-link"})}),s.title]}),d(e.h2,{id:"sp-demos",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-demos",children:t(e.span,{className:"icon icon-link"})}),"代码演示 "]}),t(c,{}),t(n,{id:"base",title:"基础用法",src:"1base.demo.tsx",code:`import { IndexList } from "cui-solid"

export default () => {
    const data = [{
        id: 'A', name: '安徽',
        children: [{name: '合肥', id: '1'},{name: '芜湖', id: '2'},{name: '蚌埠', id: '3'},{name: '淮南', id: '4'},{name: '马鞍山', id: '5'}
            ,{name: '淮北', id: '6'},{name: '铜陵', id: '7'},{name: '安庆', id: '8'}],
    },{
        id: 'B', name: '北京',
        children: [{name: '北京市', id: '北京市'}],
    }, {
        id: 'C', name: '重庆',
        children: [{name: '重庆市', id: '重庆市'}]
    }, {
        id: 'F', name: '福建',
        children: [{name: '福州市', id: '福州市'}, {name: '厦门市', id: '厦门市'}, {name: '莆田市', id: '莆田市'}, {name: '三明市', id: '三明市'}]
    }, {
        id: 'G', name: '甘肃',
        children: [{name: '兰州市', id: '兰州市'}, {name: '嘉峪关市', id: '嘉峪关市'}, {name: '金昌市', id: '金昌市'}, {name: '白银市', id: '白银市'}]
    }];

    return <div style={{height: "500px"}}>
        <IndexList data={data} />
    </div>
}`,scopes:void 0,children:t(e.p,{children:"基础用法"})}),t(n,{id:"selectable",title:"可选择",src:"2selectable.demo.tsx",code:`import { IndexList } from "cui-solid"

export default () => {
    const data = [{
        id: 'A', name: '安徽',
        children: [{name: '合肥', id: '1'},{name: '芜湖', id: '2'},{name: '蚌埠', id: '3'},{name: '淮南', id: '4'},{name: '马鞍山', id: '5'}
            ,{name: '淮北', id: '6'},{name: '铜陵', id: '7'},{name: '安庆', id: '8'}],
    },{
        id: 'B', name: '北京',
        children: [{name: '北京市', id: '北京市'}],
    }, {
        id: 'C', name: '重庆',
        children: [{name: '重庆市', id: '重庆市'}]
    }, {
        id: 'F', name: '福建',
        children: [{name: '福州市', id: '福州市'}, {name: '厦门市', id: '厦门市'}, {name: '莆田市', id: '莆田市'}, {name: '三明市', id: '三明市'}]
    }, {
        id: 'G', name: '甘肃',
        children: [{name: '兰州市', id: '兰州市'}, {name: '嘉峪关市', id: '嘉峪关市'}, {name: '金昌市', id: '金昌市'}, {name: '白银市', id: '白银市'}]
    }];

    return <div style={{height: "500px"}}>
        <IndexList data={data} selectable onChange={(v) => {
            console.log(v);
        }} />
    </div>
}`,scopes:void 0,children:d(e.p,{children:["添加 ",t(e.code,{className:"sp-inline-code",children:"selectable"})," 属性可以对选项进行选择"]})}),t(n,{id:"border",title:"边框",src:"3border.demo.tsx",code:`import { IndexList } from "cui-solid"

export default () => {
    const data = [{
        id: 'A', name: '安徽',
        children: [{name: '合肥', id: '1'},{name: '芜湖', id: '2'},{name: '蚌埠', id: '3'},{name: '淮南', id: '4'},{name: '马鞍山', id: '5'}
            ,{name: '淮北', id: '6'},{name: '铜陵', id: '7'},{name: '安庆', id: '8'}],
    },{
        id: 'B', name: '北京',
        children: [{name: '北京市', id: '北京市'}],
    }, {
        id: 'C', name: '重庆',
        children: [{name: '重庆市', id: '重庆市'}]
    }, {
        id: 'F', name: '福建',
        children: [{name: '福州市', id: '福州市'}, {name: '厦门市', id: '厦门市'}, {name: '莆田市', id: '莆田市'}, {name: '三明市', id: '三明市'}]
    }, {
        id: 'G', name: '甘肃',
        children: [{name: '兰州市', id: '兰州市'}, {name: '嘉峪关市', id: '嘉峪关市'}, {name: '金昌市', id: '金昌市'}, {name: '白银市', id: '白银市'}]
    }];

    return <div style={{height: "500px"}}>
        <IndexList data={data} border />
    </div>
}`,scopes:void 0,children:d(e.p,{children:["添加 ",t(e.code,{className:"sp-inline-code",children:"border"})," 属性渲染边框"]})}),t(n,{id:"custom",title:"自定义渲染",src:"4custom.demo.tsx",code:`import { Checkbox, IndexList, Space } from "cui-solid"

export default () => {
    const data = [{
        id: 'A', name: '安徽',
        children: [{name: '合肥', id: '1'},{name: '芜湖', id: '2'},{name: '蚌埠', id: '3'},{name: '淮南', id: '4'},{name: '马鞍山', id: '5'}
            ,{name: '淮北', id: '6'},{name: '铜陵', id: '7'},{name: '安庆', id: '8'}],
    },{
        id: 'B', name: '北京',
        children: [{name: '北京市', id: '北京市'}],
    }, {
        id: 'C', name: '重庆',
        children: [{name: '重庆市', id: '重庆市'}]
    }, {
        id: 'F', name: '福建',
        children: [{name: '福州市', id: '福州市'}, {name: '厦门市', id: '厦门市'}, {name: '莆田市', id: '莆田市'}, {name: '三明市', id: '三明市'}]
    }, {
        id: 'G', name: '甘肃',
        children: [{name: '兰州市', id: '兰州市'}, {name: '嘉峪关市', id: '嘉峪关市'}, {name: '金昌市', id: '金昌市'}, {name: '白银市', id: '白银市'}]
    }];

    return <div style={{height: "500px"}}>
        <IndexList data={data} selectable renderItem={(item: any, active: boolean) => {
            return <Space dir="h">
                <Checkbox checked={active}/>
                <div style={{flex: 1}}>{item.name}</div>
                <span style={{"padding-right": '5px'}}>xxxxxxxxx</span></Space>
        }} onChange={(v) => {
            console.log(v);
        }} />
    </div>
}`,scopes:void 0,children:d(e.p,{children:["通过 ",t(e.code,{className:"sp-inline-code",children:"renderItem"})," 方法可以自定义选项的渲染方式"]})}),d(e.h2,{id:"props",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#props",children:t(e.span,{className:"icon icon-link"})}),"属性 "]}),d(e.table,{className:"sp-table",children:[t(e.thead,{children:d(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"属性"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"类型"}),t(e.th,{style:{textAlign:"left"},children:"默认值"})]})}),d(e.tbody,{children:[d(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"classList"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),d(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"class"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),d(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"style"}),t(e.td,{style:{textAlign:"left"},children:"自定义样式"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"}})]}),d(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"data"}),t(e.td,{style:{textAlign:"left"},children:"传入的数据源"}),t(e.td,{style:{textAlign:"left"},children:"array"}),t(e.td,{style:{textAlign:"left"}})]}),d(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"selectable"}),t(e.td,{style:{textAlign:"left"},children:"可选择的"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),d(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"promote"}),t(e.td,{style:{textAlign:"left"},children:"显示提示信息"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),d(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"border"}),t(e.td,{style:{textAlign:"left"},children:"显示带边框的列表"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),d(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"renderItem"}),t(e.td,{style:{textAlign:"left"},children:"自定义渲染方法"}),t(e.td,{style:{textAlign:"left"},children:"Function"}),t(e.td,{style:{textAlign:"left"}})]}),d(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"onChange"}),t(e.td,{style:{textAlign:"left"},children:"选择选项改变事件"}),t(e.td,{style:{textAlign:"left"},children:"Function"}),t(e.td,{style:{textAlign:"left"}})]})]})]}),d(e.h2,{id:"item_props",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#item_props",children:t(e.span,{className:"icon icon-link"})}),"Item属性 "]}),d(e.table,{className:"sp-table",children:[t(e.thead,{children:d(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"属性"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"类型"}),t(e.th,{style:{textAlign:"left"},children:"默认值"})]})}),d(e.tbody,{children:[d(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"id"}),t(e.td,{style:{textAlign:"left"},children:"选项标识"}),t(e.td,{style:{textAlign:"left"},children:"string | number"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),d(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"name"}),t(e.td,{style:{textAlign:"left"},children:"显示名称"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),d(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"children"}),t(e.td,{style:{textAlign:"left"},children:"子元素"}),t(e.td,{style:{textAlign:"left"},children:"any[]"}),t(e.td,{style:{textAlign:"left"},children:"-"})]})]})]}),d(e.h2,{id:"events",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#events",children:t(e.span,{className:"icon icon-link"})}),"事件 "]}),d(e.table,{className:"sp-table",children:[t(e.thead,{children:d(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"事件名称"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"返回值"})]})}),t(e.tbody,{children:d(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:t(e.code,{className:"sp-inline-code",children:"onChange"})}),t(e.td,{style:{textAlign:"left"},children:"选择选项改变事件"}),t(e.td,{style:{textAlign:"left"},children:"value[]"})]})})]})]}),`
`,`
`,`
`,t(a,{data:[{id:"",depth:1,title:""},{id:"sp-demos",depth:2,title:"代码演示"},{id:"base",title:"基础用法",src:"1base.demo.tsx"},{id:"selectable",title:"可选择",src:"2selectable.demo.tsx"},{id:"border",title:"边框",src:"3border.demo.tsx"},{id:"custom",title:"自定义渲染",src:"4custom.demo.tsx"},{id:"props",depth:2,title:"属性"},{id:"item_props",depth:2,title:"Item属性"},{id:"events",depth:2,title:"事件"}]})]})}function x(i={}){const{wrapper:e}=i.components||{};return e?t(e,{...i,children:t(l,{...i})}):l(i)}export{x as default,s as frontmatter};
